<script setup>
import { ref, defineProps } from "vue";
import Selector from "./difficultySelector.vue";
import { getQuestionListApi } from "@/api/question";
import { defineEmits } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps(["alreadyAddQuestion"]);
const formRef = ref();
const searchInfo = ref({
  title: "",
  difficulty: "",
  pageNum: 1,
  pageSize: 10,
  excludeIdsStr: "",
});
const total = ref(0);
const questionList = ref();

async function getQuestionList() {
  try {
    const ids = props.alreadyAddQuestion.map((item) => item.questionId);
    searchInfo.value.excludeIdsStr = ids.join(";");
    const resp = await getQuestionListApi(searchInfo.value);
    questionList.value = resp.rows;
    total.value = resp.total;
  } catch (e) {
    ElMessage.error(e.message);
  }
}

// pageSize发生变化
const handlePageSizeChange = async () => {
  searchInfo.pageNum = 1;
  await getQuestionList();
};
// 页码发生变化
const handleCurrentChange = async () => {
  await getQuestionList();
};
// 搜索
const handleSearch = () => {
  if (!searchInfo.value.difficulty && !searchInfo.value.title) {
    ElMessage.warning("请输入查询条件");
    return;
  }
  searchInfo.value.pageNum = 1;
  getQuestionList();
};

// 选择题目
const selectedQuestion = ref([]);
const handleQuestionSelect = (selection) => {
  selectedQuestion.value = [];
  selection.forEach((element) => {
    selectedQuestion.value.push(element.questionId);
  });
};
// 重置搜索条件
const onReset = () => {
  searchInfo.value.pageNum = 1;
  searchInfo.value.pageSize = 10;
  searchInfo.value.difficulty = null;
  searchInfo.value.title = null;
  getQuestionList();
};
const emit = defineEmits(["add"]);
// 点击新增题目
const handleAddQuestion = () => {
  if (selectedQuestion.value.length < 1) {
    ElMessage.warning("请先选择要添加的题目");
    return;
  }
  emit("add", selectedQuestion.value);
};

getQuestionList();
</script>
    
<template>
  <el-form ref="formRef" :model="searchInfo" :inline="true">
    <el-form-item
      ><Selector
        placeholder="请选择题目难度"
        style="width: 200px"
        v-model="searchInfo.difficulty"
      ></Selector
    ></el-form-item>
    <el-form-item>
      <el-input
        placeholder="请输入您要搜索的题目标题"
        v-model="searchInfo.title"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button plain @click="handleSearch">搜索</el-button>
      <el-button plain type="info" @click="onReset">重置</el-button>
    </el-form-item></el-form
  >
  <el-table
    :data="questionList"
    style="width: 100%"
    :header-cell-style="{ background: '#32c5ff', color: '#fff' }"
    height="300px"
    @select="handleQuestionSelect"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="questionId" label="题目id" width="150px">
    </el-table-column>
    <el-table-column prop="title" label="题目标题"> </el-table-column>
    <el-table-column prop="difficulty" label="题目难度" width="150px">
      <template #default="{ row }">
        <div v-if="row.difficulty === 1" style="color: #3ec8ff">简单</div>
        <div v-if="row.difficulty === 2" style="color: #fe7909">中等</div>
        <div v-if="row.difficulty === 3" style="color: #fd4c40">困难</div>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="searchInfo.pageNum"
    v-model:page-size="searchInfo.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    background
    @size-change="handlePageSizeChange"
    @current-change="handleCurrentChange"
  />
  <el-button
    type="primary"
    style="width: 100%; margin-top: 20px"
    @click="handleAddQuestion"
    >添加</el-button
  >
</template>
    
<style scoped lang="less">
/deep/.el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>